<template>
	<section class="lottery-help" v-if="data">
		<loadmore :top-method="refresh" :bottom-all-loaded="allLoaded" ref="loadmore">
			<img class="list-left" :src="share_info.img" alt="商品图片" style="display:none"/>
			<div class="lottery-help-top">
				<div class="layout-juscon ml30rem mr30rem pt40rem pb40rem">
					<img class="list-left mr20rem" :src="img_url+data.user_headimg" alt="">
					<div class="list-mid flex_1 layout-juscon flex-column ml20rem">
						<p class="ellipsis fs32rem">{{ data.nick_name }}</p>
						<div class="list-mid-bottom layout-juscon">
							<p class="flex-center fs24rem">免费获得该商品，帮我获得幸运值</p>
						</div>
					</div>
					<div class="list-right">
						<p class="fs26rem pl20rem pr20rem pt5rem pb5rem" @click="rulesShow = true">活动规则</p>
					</div>
				</div>
			</div>
			<div class="lottery-help-product">
				<router-link tag="div" :to="'/detail/activity-detail/'+ data.goods_id" class="layout-juscon ml30rem mr30rem pt25rem pb25rem">
					<img class="list-left" :src=" img_url+data.img " alt="">
					<div class="list-mid flex_1 layout-juscon flex-column ml30rem c53">
						<p class="ellipsis-more fs32rem c333">{{ data.goods_name }}</p>
						<div class="list-mid-pirce fs34rem flex">
							<strong class="cxo-red-color">￥{{ data.price }}</strong><del class="fs24rem flex-center ml20">原价{{ data.market_price }}元</del>
						</div>
						<div class="list-mid-bottom layout-juscon">
							<p class="flex-center fs24rem">截止时间：{{data.activity_endtime * 1000,"yyyy.MM.dd"|formatDate}} 已有 <i class="cxo-red-color">{{ data.people }}人免费</i>获得</p>
						</div>
					</div>
				</router-link>
			</div>
			<div class="lottery-help-people pt70rem pb70rem ml30rem mr30rem">
				<div class="lottery-help-people-top layout-juscon mb30rem">
					<h3 class="fs26rem c53">参与助力：</h3>
					<span class="cxo-red-color fs24rem flex" @click="replace">换一批<i class="iconfont icon-gengxin flex-center ml5rem"></i></span>
				</div>
				<ul class="help-people-box mb60rem" v-show="peopleShow == 1">
					<p class="align-center mr20rem">暂无好友助力</p>
					<span class="block align-center mt20rem">╮(╯﹏╰)╭</span>
				</ul>
				<ul class="help-people-box mb60rem flex" v-show="peopleShow == 2" style="justify-content:center">
					<li class="align-center" v-for="item in people" style="width:15%;">
						<img :src="img_url + item.user_headimg" alt="">
						<span class="fs24rem mt5rem block w100 auto align-center" style="overflow: hidden;">{{ item.nick_name }}</span>
					</li>
				</ul>
				<button class="cxo-red seek fs32rem white align-center mb30rem" :class="{ on : data.button_state == 0}" @click="helpShare" v-if="!fuid">{{ data.button_txt }}</button>
				<button class="cxo-red seek fs32rem white align-center mb30rem" @click="helpBtn" v-if="fuid">帮TA助力</button>
				<router-link tag="button" class="cxo-red seek fs32rem white align-center mb30rem" to="/detail/help-list?type=-2" v-if="fuid">我要参与
				</router-link>
				<p class="fs24rem align-center">已助力<i class="cxo-red-color">{{ data.luckyed }}</i> 幸运值，还差<i class="cxo-red-color">{{ data.diff_lucky }}</i>幸运值。可免费获得</p>
			</div>
			<div class="new-recommend">
				<h3 class="product-title layout align-center"> 
					<p class="layout">
						<i class="rhombus rhombus-son"></i>
						<i class="rhombus ml15rem"></i>
					</p>
					<strong class='fs34rem c333 bold'>更多新品推荐</strong>
					<p class="layout">
						<i class="rhombus mr15rem"></i>
						<i class="rhombus rhombus-son"></i>
					</p>
				</h3>
				<recommend-list></recommend-list>
			</div>
			<div class="help-share" v-show="shareShow" @click="shareShow = false">
				<ul class="flex-left pt30rem pb30rem" v-if='showApp'>
					<li @click="share('wechat')">
						<i class="iconfont icon-weixin1 wechat auto"></i>
						<span>微信</span>
					</li>
					<li @click="share('friends')">
						<i class="iconfont icon-pengyouquan circle auto"></i>
						<span>朋友圈</span>
					</li>
					<!-- <li>
						<i class="iconfont icon-qq qq"></i>
						<span>QQ</span>
					</li>
					<li>
						<i class="iconfont icon-weibo weibo"></i>
						<span>微博</span>
					</li> -->
				</ul>
				<img src="../../../assets/share.png" alt="" style="pointer-events: none;" v-else>
			</div>
			<div class="my-lotterty-box flexcenter" v-show="rulesShow" v-if="data.rules">
				<div class="my-lotterty">
					<i class="iconfont icon-guanbi" @click="rulesShow = false"></i>
					<!-- <div class="status-img">
						<img src="../../../assets/lose.png" alt="">
						<img src="../../../assets/success.png" alt="">
					</div> -->
					<h2 class="fs30rem pb30rem pt30rem">{{ data.rules.title }}</h2>
					<div class="pl30rem pr30rem pt30rem pb30rem" v-html="data.rules.content">
						<!-- 幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明。 -->
					</div>
				</div>
			</div>
			<div class="wechatCode" v-if="codeShow" @click="codeShow = !codeShow">
				<div class="box">
					<p class="bg-white pt30rem pb30rem pl30rem pr30rem fs32rem align-center">请长按二维码识别关注公众号，享受更多体验机会</p>
					<img class="responsive-img" :src="codeUrl" alt="">
				</div>
			</div>
		</loadmore><share-footer></share-footer>
	</section>
</template>

<script>
	import { getHelp, getHelpPeople, getHelpShare, getWchatPublicLogin, wechatCode } from '@/api/goods-detail';
	import { getWechatConfig, getShareIndex, getWechatShare } from '@/api/goods-detail';
	import Countdown from '@/components/Countdown';
	import $toast from '@/utils/toast';
	import { formatDate,iosapp } from '@/utils';
	import RecommendList from '@/components/recommend-list';
	import { Loadmore } from 'mint-ui';
    import ShareFooter from "../../../components/Share-footer";

	export default{
		components:{
            ShareFooter,
            Countdown,
			RecommendList,
			Loadmore
		},
		data()
		{
			return{
				showApp       : window.sessionStorage.getItem('isapp'),
				uid           : window.localStorage.getItem('uid'),//当前用户ID
				goods_id      : this.$route.query.goodsId,
				address_id    : this.$route.query.addressId,
				fuid          : this.$route.query.fuid,//获取分享链接上的fuid用于渲染上级用户数据
				parent_id     : this.$route.query.uid,//获取分享链接的uid用于返回给后台
				class_type    : this.$store.state.class_id,//-2:幸运助力  -3：免费抽奖   -4：分享有礼
				img_url       : process.env.IMG_URL,
				activity_cate : 1, //活动类型 1：幸运助力 2：免费抽奖 3：分享有礼
				page_index    : 1,
				page_size     : 4,
				peopleShow    : '',
				links         : '',
				codeUrl       : '',
				data          : [],
				people        : [],
				wechatConfig  : [],
				share_info    : [],
				recommand     : [],
				shareShow     : false,
				countdownType : true,
				rulesShow     : false,
				codeShow      : false,
				allLoaded     : false,
				loading       : false,
			}
		},
		created()
		{
			// if(this.$route.query.fuid &&!this.$route.query.uid)
			// 	location.href = 'https://fish.qidongwx.com/service/Thirdlogin/wchatPublicLogin?fuid=' + this.fuid +'&goods_id='+ this.goods_id +'&type=1';

			
			if(this.$route.query.uid)
				window.localStorage.setItem('uid',this.$route.query.uid)

			this.loadData();
			this.loadPeople();
			this.getConfig();
			
		},
		filters:
 		{
			formatDate(time, fmt)
			{
				let date = new Date(time);
				return formatDate(date,fmt)
			}
		},
		methods:
		{
			refresh()
			{
				this.page_index = 1,
				this.loadData();
				this.loadPeople();
				setTimeout(() => {
					// this.allLoaded = true;
					this.$refs.loadmore.onTopLoaded();
				},1000)
			},
			loadData()
			{
				let params =
				{
					goods_id   : this.goods_id,
					address_id : this.address_id,
					uid        : this.fuid ? this.fuid : this.uid,
				};
				getHelp(params).then(res =>
				{
					this.data = res.data;
					this.parent_id = res.data.uid;
				});
			},
			loadPeople(){
				let paramsPeople = {
					goods_id   : this.goods_id,
					uid        : this.fuid ? this.fuid : this.uid,
					page_index : this.page_index,
					page_size  : this.page_size,
				}
				getHelpPeople(paramsPeople).then(res =>{
					if(res.data.length > 0 )
					{
						this.peopleShow = 2;
						this.people = res.data;
					}
					else
					{
						this.peopleShow = 1;
					}
				})
			},
			replace()
			{
				this.loading = true;
				let paramsPeople = {
					goods_id   : this.goods_id,
					uid        : this.fuid ? this.fuid : this.uid,
					page_index : ++this.page_index,
					page_size  : this.page_size,
				}
				getHelpPeople(paramsPeople).then(res =>{
					if(res.data.length > 0 )
					{
						this.people     = [];
						this.peopleShow = 2;
						this.people     = this.people.concat(res.data);
						this.loading = false;
					}
					else if (paramsPeople.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < paramsPeople.page_size)
					{
						this.loading = true;

					}
				})
			},
			helpShare(){
				if(this.data.button_state != 0)
					this.shareShow = true;
			},
			getConfig() { 
		        let url = location.href.split('#')[0] //获取锚点之前的链接
		        getWechatConfig(url).then(response => {
			        let res = response.data;
			        this.Share(res);
		        });
		    },
			//分享获取分享标题、链接、图片
			Share(resData)
			{
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: resData.appId, // 必填，公众号的唯一标识
				    timestamp: resData.timestamp, // 必填，生成签名的时间戳
				    nonceStr: resData.nonceStr, // 必填，生成签名的随机串
				    signature: resData.signature,// 必填，签名
				    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});

				let params = {
					fuid     : this.fuid ? this.fuid : this.uid,
					goods_id : this.goods_id,
				}
				//获取微信config
				getWechatShare(params).then(res =>{
					let url = location.href.split('#')[0];
					let links = res.data.url;
			        let title = res.data.title;
			        let desc = res.data.content;
			        let imgUrl = res.data.img;
					wx.ready(()=>{
						wx.onMenuShareTimeline({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {
				              	alert("分享到朋友圈成功")
				            },
				            cancel: function() {
				              	alert("分享失败,您取消了分享!")
				            }
				          });
				          //微信分享菜单测试
				          wx.onMenuShareAppMessage({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {

							},
							cancel: function() {
								
							}
						});
					})
				});
			},
			//帮助好友分享
			helpBtn()
			{

				if(this.data.button_state == 0) return;
				
				if(this.$route.query.uid)
				{
					if(this.$route.query.sub == 0){
						
						this.codeShow = true;
						let paramCode = {
							fuid     : this.$route.query.fuid,
							uid      : this.$route.query.uid,
							goods_id : this.goods_id,
							type     : 1
						}
						wechatCode(paramCode).then(res =>{
							this.codeUrl = res.data.qrcode;
						})
					}
					else
					{
						let params = {
							uid      : this.$route.query.uid,
							fuid     : this.fuid,
							goods_id : this.goods_id
						}
						getHelpShare(params).then(res =>{
							this.loadPeople();
							this.loadData();
						})
					}
				}
			},
			share(name)
			{
				let params = {
					goods_id  : this.goods_id,
					iOSCode : 'share_content', 
				}
				if(name == 'wechat')
					iosapp('shareWechat',params)
				else
					iosapp('shareFriends',params)
			}
		}
	}
</script>

<style lang="less">
.lottery-help
{
	.lottery-help-top
	{
		background: #fff;
		img
		{
			width: 85/28rem;
			height: 85/28rem;
			border-radius: 50%;
			object-fit: cover;
		}
		.list-right
		{
			p
			{
				border-radius: 20/28rem;
				border:1px solid #ff0036;
				color: #ff0036;
			}
		}
	}
	.lottery-help-product
	{
		background: #f7f7f7;
		img
		{
			width: 210/28rem;
			height: 225/28rem;
			object-fit: cover;
		}
	}
	.count-down
	{
		max-width: 300/28rem;
		margin-right: auto;
		margin-left: auto;
		span{
			border-radius: 5/28rem;
		}
		.bg-red
		{
			background: #383838;
		}
		strong{
			i{
				display:block;
				width: 4/28rem;
				height: 4/28rem;
			}
		}
	}
	.lottery-help-people
	{
		background: #fff;
		ul
		{
			li
			{
				margin-right: 30/28rem;
				margin-left: 30/28rem;
				i
				{
					display: block;
					width: 85/28rem;
					height: 85/28rem;
					line-height: 85/28rem;
					object-fit: cover;
					border-radius: 50%;
					background: #dfdfdf;
					color: #a8a8a8;
				}
				img
				{
					display: block;
					width: 85/28rem;
					height: 85/28rem;
					object-fit: cover;
					border-radius: 50%;
				}
				span
				{
					display: block;
				}
			}
		}
		.on
		{
			background: rgba(255, 0, 54, 0.38);
		}
		button
		{
			height: 80/28rem;
			line-height: 80/28rem;
			border-radius: 5px;
			width: 80%;
			display: block;
			margin-right: auto;
			margin-left: auto;
		}
		.join
		{
			border:1px solid #ff0036;
		}
	}
	.new-recommend
	{
		background: #f5f5f5;
		.recommend-list{
			.list-ul{
				li{
					width: 48%;
					img{
						height: 366/28rem;
					}
					.count-down{
						span{
							background-color: #383838;
						}
						strong{
							i{
								background-color: #383838;
							}
						}
					}
					.experience{
						border-radius: 5/28rem;
						background-color: #ffdee5;
						padding:2/28rem 5/28rem;
						vertical-align: top;
					}
				}
			}

		}
	}
	
	.my-lotterty-box
	{
		z-index: 99;
		position: fixed;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		background: rgba(0,0,0,.5);
		width: 100%;
		height: 100%;
		.my-lotterty
		{
			background: #fff;
			width: 80%;
			border-radius: 8px;
			position: relative;
			i
			{
				position: absolute;
				top: -20/28rem;
				right: -20/28rem;
				background: #e5e5e5;
				font-size: 30/28rem;
				width: 54/28rem;
				height: 54/28rem;
				text-align: center;
				line-height: 54/28rem;
				border-radius: 50%;
				color: #666;
			}
			h2
			{
				border-bottom: 1px solid #e5e5e5;
				text-align: center;
			}
			
		}
	}
	.help-share
	{
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,.8);
		width: 100%;
		height: 100%;
		img
		{
			width: 100%;
			display: block;
		}
		ul
		{
			position:fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			li
			{
				width: 25%;
				text-align: center;
				i
				{
					width: 100/28rem;
					height: 100/28rem;
					border-radius: 50%;
					line-height: 100/28rem;
					text-align: center;
					color: #fff;
					display: block;
					font-size: 60/28rem;
				}
				.weibo
				{
					background: #fe555f;
				}
				.wechat
				{
					background: #21cc51;
				}
				.qq
				{
					background: #65aef3
				}
				.circle
				{
					background: #9b8cc6;
				}
				span
				{
					font-size: 28/28rem;
					display: block;
					margin-top: 20/28rem;
				}
			}
		}
	}
	
}
</style>